<!--
  功能：平台接口管理
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年10月20日 23:48:43
-->
<template>
  <div>
    <div class="search">
      <a-space>
        <a-input v-model:value="search.name" placeholder="名称检索" />
        <a-input v-model:value="search.code" placeholder="编码检索" />
        <a-button type="primary" @click="serch">
          <template #icon>
            <search-outlined />
          </template>
          检索
        </a-button>
        <a-button type="primary" @click="insert">
          <template #icon>
            <plus-outlined />
          </template>
          创建
        </a-button>
      </a-space>
    </div>
    <a-empty v-if="!tableData || tableData.length == 0" />
    <a-row :gutter="12">
      <a-col :span="6" v-for="item in tableData" :key="item.code">
        <a-badge-ribbon text="New" color="magenta" v-if="$isNewDataByTime(item.updateTime)">
          <div class="card-item" @click="detailRow(item)">
            <div class="title">{{item.name}}</div>
            <div class="msg">{{item.message}}{{item.message}}{{item.message}}</div>
            <div class="option">
              <a-space>
                <a-tooltip title="编辑" color="#108ee9">
                  <a-button type="link" @click.stop="updateRow(item)">
                    <template #icon>
                      <form-outlined />
                    </template>
                  </a-button>
                </a-tooltip>
                <a-tooltip title="删除" color="red">
                  <a-button type="link" danger @click.stop="delRow(item)">
                    <template #icon>
                      <delete-outlined />
                    </template>
                  </a-button>
                </a-tooltip>
              </a-space>
            </div>
          </div>
        </a-badge-ribbon>
        <div class="card-item" v-else @click="detailRow(item)">
          <div class="title">{{item.name}}</div>
          <div class="msg">{{item.message}}{{item.message}}{{item.message}}</div>
          <div class="option">
            <a-space>
              <a-tooltip title="编辑" color="#108ee9">
                <a-button type="link" @click.stop="updateRow(item)">
                  <template #icon>
                    <form-outlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip title="删除" color="red">
                <a-button type="link" danger @click.stop="delRow(item)">
                  <template #icon>
                    <delete-outlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-space>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-pagination v-model:current="pagination.current" :total="pagination.total" v-model:pageSize="pagination.pageSize" :showSizeChanger="pagination.showSizeChanger" :showTotal="pagination.showTotal" @change="pagination.onChange" hideOnSinglePage style="float:right" />

    <a-modal :open="form.visible" :title="form.type=='insert'?'创建接口信息':'编辑接口信息' " @change="form.visible = false" :footer="null" destroyOnClose width="65%">
      <formModel :row="form.row" :type="form.type" @success="successForm" />
    </a-modal>
  </div>
</template>

<script>
import {
  PlusOutlined,
  AlertFilled,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  FormOutlined
} from "@ant-design/icons-vue";
import { pageList, remove } from "@/api/platform/plInterfaceApi";
import formModel from "./formModel.vue";
import { message } from "ant-design-vue";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import {} from "vuex";

export default defineComponent({
  name: "",
  props: {},
  emits: [],
  setup(props, context) {
    const router = useRouter();
    const search = {
      name: "",
      code: ""
    };
    const pagination = {
      current: 1,
      pageSize: 10,
      showSizeChanger: true,
      total: 0,
      showTotal: (total, range) => {
        return `${range[0]}-${range[1]} 共 ${total} 条数据`;
      },
      onChange: (page, pageSize) => {
        data.pagination.current = page;
        data.pagination.pageSize = pageSize;
        initPageList();
      }
    };

    // 初始化表格列表
    let initPageList = () => {
      let params = {
        current: pagination.current,
        size: pagination.pageSize,
        name: search.name,
        code: search.code
      };
      pageList(params).then(resd => {
        data.tableData = resd.records;
        data.pagination.total = resd.total;
      });
    };

    // 检索
    let serch = () => {
      pagination.current = 1;
      initPageList();
    };
    // 页面初始化
    onMounted(() => {
      initPageList(); // 初始化表格
    });

    /* 创建数据 */
    let insert = () => {
      data.form.visible = true;
      data.form.type = "insert";
    };
    // 表单成功回调函数
    let successForm = () => {
      initPageList();
      data.form.visible = false;
    };

    /* 更新行数据 */
    let updateRow = row => {
      data.form.row = row;
      data.form.visible = true;
      data.form.type = "update";
    };
    /*删除行数据 */
    let delRow = row => {
      let params = [row.id];
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`);
        initPageList();
      });
    };
    /* 查看行数据 */
    let detailRow = row => {
      router.push({ name: "plInterfaceDetail", query: { code: row.code } });
    };

    const data = reactive({
      search,
      pagination,
      tableData: null,
      form: {
        selectedRowKeys: [],
        selectedRows: [],
        row: null,
        type: "insert",
        visible: false
      }
    }); //里面写所有的响应式数据，像vue2中的data一样

    return {
      ...toRefs(data),
      serch,
      insert,
      successForm,
      updateRow,
      delRow,
      detailRow
    };
  },
  components: {
    formModel,
    PlusOutlined,
    AlertFilled,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
    FormOutlined
  }
});
</script>

<style scoped lang="scss">
.crud,
.search {
  margin-bottom: 10px;
}
.card-item {
  list-style: none;
  width: 100%;
  height: 180px;
  background: #fbfbfd;
  border: 1px solid #e6e8f1;
  box-sizing: border-box;
  padding: 16px 16px 14px;
  float: left;
  margin-right: 16px;
  margin-bottom: 16px;
  position: relative;
  cursor: pointer;
  .title {
    margin-top: 12px;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #2b2b33;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .msg {
    width: 100%;
    height: 63px;
    font-size: 0.8rem;
    color: #6b6b77;
    line-height: 21px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .option {
    float: right;
  }
}
</style>